<template>
	<view class="address">
		<view class="list">
			<view class="item" v-for="item in addressList" :key="item.id" @tap="choiceAddress(item)">
				<view class="left">
					<view class="name-holder">
						<view class="name">
							{{item.name}}
						</view>
						<view class="default" v-if="item.defaultStatus ===1">
							默认
						</view>
					</view>

					<view class="phone">
						{{item.phoneNumber}}
					</view>
				</view>

				<view class="right" @tap.stop="toChangeAddress(item)">
					<image src="/static/icons/edit.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="add btn" @tap="toAddAddress">
			新增地址
		</view>
	</view>
</template>

<script>
	import {
		requestAllAddress
	} from 'api/user/address.js';
	export default {
		data() {
			return {
				addressList: [],
			};
		},
		methods: {
			getAllAddress() {
				requestAllAddress().then(res => {
					console.log(res);
					this.addressList = res.data.items;
				})
			},
			toAddAddress() {
				uni.navigateTo({
					url: `/pages/user/address/address-add/address-add`
				})
			},
			toChangeAddress(item,id) {
				uni.setStorageSync('addressChange',item);
				uni.navigateTo({
					url: `/pages/user/address/address-add/address-add?addressId=${item.id}`
				})
			},
			choiceAddress(item){
				uni.setStorageSync('address',item);
				uni.showToast({
					title:'选择地址成功，即将返回',
					icon:'success',
					duration:1000,
				})
				
				setTimeout(()=>{
					uni.navigateBack({
						delta:1,
					})
				},1000)
			}
		},
		onShow() {
			this.getAllAddress();
		},
	}
</script>

<style lang="scss" scoped>
	.address {
		.list {
			box-sizing: border-box;
			padding: 22rpx;

			.item {
				box-sizing: border-box;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 120rpx;
				border-bottom: 2rpx solid #ccc;

				.left {
					box-sizing: border-box;
					padding: 20rpx;
					flex: 1;

					.name-holder {
						display: flex;
						margin-bottom: 10px;

						.name {
							color: #3e3e3e;
						}

						.default {
							font-size: 22rpx;
							background-color: #354e44;
							color: #fff;
							padding: 0 18rpx;
							border-radius: 8rpx;
							margin-left: 20rpx;
						}
					}

					.phone {
						color: #999;
					}
				}

				.right {
					display: flex;
					width: 80rpx;
					height: 60rpx;
					border-left: 2rpx solid #ccc;

					image {
						margin: auto;
						display: block;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.add.btn {
			position: fixed;
			bottom: 32rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 70%;
			height: 80rpx;
			font-size: 30rpx;
			color: #fff;
			box-shadow: 0px 2px 5px rgba(0, 0, 0, .4);
			border-radius: 40px;
			line-height: 80rpx;
			text-align: center;
			background-color: #354e44;
		}
	}
</style>
